/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-20 18:12:36
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2022-12-21 10:05:24
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProcessBroad\components\Equipment.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Progress } from 'antd'

import styles from './equipment.module.less'

export default (props) => {
  const { data = {} } = props
  return (
    <div className={styles.container}>
      <header className={styles.equipmentHeader}>设备情况</header>
      <div className={styles.equipmentsInfo}>
        <div className={styles.equipmentsItem}>
          <div className={styles.count}>{data?.countNum || 0}</div>
          <div className={styles.label}>站位数</div>
        </div>
        <div className={styles.equipmentsItem}>
          <div className={styles.count}>{data?.inUseNum || 0}</div>
          <div className={styles.label}>使用数量</div>
        </div>
        <div className={styles.useCircle}>
          <Progress
            type="circle"
            strokeWidth={16}
            strokeLinecap={'square'}
            percent={data.usage ? Number(data?.usage.replace('%', '')) : 0}
            strokeColor="#44D7B6"
            trailColor="#072C88"
            width={100}
            format={() => {
              return (
                <div className={styles.percent}>
                  <div className={styles.percentCount}>{data?.usage || 0}</div>
                  <div className={styles.percentText}>使用率</div>
                </div>
              )
            }}
          />
        </div>
      </div>
    </div>
  )
}
